<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>盒子模型-外补丁</title>
  <style>
    /*盒子的外补丁：描述盒子的水平与垂直间距*/
    span{
      background-color: lightcoral;
      border: 1px solid blue;
    }
    div{
      background-color: lightcoral;
      border: 1px solid blue;
      width: 500px;
      height: 100px;
    }
    /*1. 盒子的水平间距：左边盒子的右边距与右边盒子的左边距之和*/
    .sp1{
      margin-right: 20px;
    }
    .sp2{
      margin-left: 0px;
    }
    /*2. 盒子的垂直间距：上边盒子的下边距margin-bottom、下边盒子的上边距margin-top取最大值*/
    .d1{
      margin-bottom: 30px;
    }
    .d2{
      margin-top:0px;
    }
  </style>
</head>
<body>
  <h2>1. 盒子的水平间距<hr></h2>
  <span class="sp1">盒子一</span>
  <span class="sp2">盒子二</span>
  <h2>2. 盒子的垂直间距<hr></h2>
  <div class="d1">盒子一</div>
  <div class="d2">盒子二</div>
</body>
</html>
